<template>
    <div id="reportForms">
      <div></div>
      <div>
        <div></div>
        <div>
          <table border="0" cellspacing="0" cellpadding="0">
            <tr class="title">
              <th >表名</th>
              <th>位置</th>
              <th>用途</th>
              <th>表值</th>
              
            </tr>
            <tr v-for="(item, index) in table" :key="index">
              <td>{{ item.personName }}</td>
              <td>{{ item.startTime }}</td>
              <td>{{ item.doorName }}</td>
              <td style="color: cyan; ">{{ item.desc }}</td>
              <!-- <td style="color: cyan; ">{{ item.inAndOutType }}</td> -->
            </tr>
          </table>
        </div>
        <div>
          <el-pagination
            background
            layout="prev, pager, next"
            :total="total"
            :page-size="pageSize"
            :pager-count="pagerCount"
            @next-click="check"
            @prev-click="check"
            @current-change="check"
          >
          </el-pagination>
  
          <!-- :pager-count=pagerCount -->
          <!-- <button type="button" class="btn-total">共 {{ pagee }} 页</button> -->
        </div>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        tableData: [],
  
        total: 100,
        pageSize: 5,
        pagee: "",
        table: [],
        pagerCount: 7,
        currentPage: 1,
      };
    },
    mounted() {
      this.winSize();
      window.onresize = () => {
        return (() => {
          var ratioX = window.innerWidth / 370;
          var ratioY = window.innerHeight / 880;
          window.document.body.style.transform = "scale(" + ratioY + ")";
          window.document.body.style.transformOrigin = "0px 0px";
        })();
      };
    },
    methods: {
      winSize() {
        var ratioY = window.innerHeight / 880;
        window.document.body.style.transform = "scale(" + ratioY + ")";
        window.document.body.style.transformOrigin = "0px 0px";
      //   this.shipinList();
      },
      page() {
        this.pagee = this.total / this.pageSize;
      },
      shipinList() {
        let params = {
          startTime: "2023/7/19",
          endTime: "2023/8/19",
          pageNo: 1,
          pageSize: 10,
        };
        accessList(params)
          .then((res) => {
            console.log(res);
            this.tableData =  res.data.rows;
            this.table = this.tableData.slice(
              this.pageSize * this.currentPage - this.pageSize,
              this.pageSize * this.currentPage
            );
            // console.log(this.table, 'tab');
            this.total = this.tableData.length;
          })
          .catch((err) => {
            console.log(err);
          });
      },
      check(res) {
        // console.log(res, 'res');
        this.currentPage = res;
        this.shipinList();
      },
      handleFilter() {
        // console.log("123456");
        this.shipinList();
      },
    },
  };
  </script>
  
  <style lang="less" scoped>
  #reportForms {
    font-weight: bold;
    // background-color: rgba(0, 0, 0, .6);
  
    width: 1712px;
    height: 880px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 50px 40px;
  
    box-sizing: border-box;
  
    > div:nth-child(1) {
      width: 100%;
      display: flex;
  
      > div:nth-child(1) {
        text-align: left;
        width: 479px;
        height: 71px;
        line-height: 71px;
        background: linear-gradient(
          93deg,
          rgba(0, 119, 245, 0.5),
          rgba(0, 118, 245, 0)
        );
        font-family: Source Han Sans CN;
        font-size: 40px;
        color: #fff;
        white-space: pre;
  
        > span {
          display: inline-block;
          margin-left: 30px;
          font-weight: 400;
        }
      }
  
      > div:nth-child(2) {
        text-align: left;
        flex: 0.9;
        height: 71px;
        line-height: 71px;
        font-family: Source Han Sans CN;
        font-size: 28px;
        color: #fff;
        white-space: pre;
  
        > span {
          display: inline-block;
          // margin-left: 10px;
        }
  
        > input {
          display: inline-block;
          width: 50%;
          font-size: 28px;
          border: none;
          background: none;
          border-bottom: 1px solid #fff;
          color: #fff;
        }
  
        > input:focus {
          outline: none;
        }
      }
  
      > div:nth-child(3) {
        text-align: left;
        width: 280px;
        // background-color: #fff;
        height: 71px;
        line-height: 71px;
        font-family: Source Han Sans CN;
        font-size: 38px;
        color: #fff;
        white-space: pre;
  
        > span {
          /* display: inline-block; */
          margin-left: 10px;
        }
  
        > input {
          display: inline-block;
          width: 80%;
          font-size: 38px;
          border: none;
          background: none;
          border-bottom: 1px solid #fff;
          color: #fff;
        }
  
        > input:focus {
          outline: none;
        }
      }
  
      > div:nth-child(4) {
        text-align: left;
        flex: 1;
        height: 71px;
        line-height: 71px;
        font-family: Source Han Sans CN;
        font-size: 38px;
        color: #fff;
        white-space: pre;
  
        > span {
          display: inline-block;
          margin-left: 20px;
        }
  
        > input {
          display: inline-block;
          width: 45%;
          font-size: 38px;
          border: none;
          background: none;
          border-bottom: 1px solid #fff;
          color: #fff;
        }
  
        > input:focus {
          outline: none;
        }
      }
  
      > div:nth-child(5) {
        flex: 1;
        text-align: right;
  
        img {
          cursor: pointer;
        }
      }
    }
  
    > div:nth-child(2) {
      flex: 1;
      display: flex;
      justify-content: space-between;
      flex-direction: column;
  
      > div:nth-child(1) {
        width: 100%;
        display: flex;
        justify-content: space-around;
        align-items: center;
        font-size: 34px;
        color: #fff;
        // height: 86px;
        line-height: 86px;
        // margin-top: 29px;
      }
  
      > div:nth-child(2) {
        height: 100%;
  
        table {
          width: 100%;
          height: 100%;
          text-align: center;
          // display: -webkit-box;
          // -webkit-box-orient: vertical;
          // -webkit-line-clamp: 3;
          overflow: hidden;
          font-weight: bold;
  
          th {
            height: 100px;
            color: #fff;
            // width: 100%;
            // display: flex;
            // justify-content: space-around;
            // align-items: center;
            font-size: 50px;
            text-align: center;
          }
  
          > tr:first-child {
            background-color: rgba(33, 76, 109, 0.5);
          }
  
          tr {
            height: 125px;
            color: #fff;
            width: 100%;
            // display: flex;
            // justify-content: space-around;
            // align-items: center;
            font-size: 37px;
  
            td {
              border-bottom: 2px solid #fff;
            }
  
            // text-align: center;
  
            // td:nth-child(1) {
            //     flex: 1;
            // }
  
            // td:nth-child(2) {
            //     flex: 1;
            // }
  
            // td:nth-child(3) {
            //     flex: 1;
            // }
  
            // td:nth-child(4) {
            //     flex: 1;
            // }
  
            // td:nth-child(5) {
            //     flex: 1;
            // }
  
            // td:nth-child(6) {
            //     flex: 1;
            // }
          }
        }
      }
  
      > div:nth-child(3) {
        margin: 24px 15px 0;
        height: 46px;
        display: flex;
        color: #fff;
        font-size: 24px;
        // padding: 17px 15px;
        justify-content: center;
        align-items: center;
  
        .btn-total {
          background-color: rgba(2, 4, 13, 0.5) !important;
          border: 2px solid #00ffff;
          color: #fff;
          font-size: 26px;
          height: 28px;
          padding: 0 23px;
          box-sizing: border-box;
          border-radius: 3px;
          height: 35px;
        }
      }
    }
  
    // >div:nth-child(3) {
    //     margin: 24px 15px;
    //     height: 46px;
    //     display: flex;
    //     color: #fff;
    //     font-size: 24px;
    //     // padding: 17px 15px;
    //     justify-content: center;
    //     align-items: center;
  
    //     .btn-total {
    //         background-color: rgba(2, 4, 13, 0.5) !important;
    //         border: 2px solid #00FFFF;
    //         color: #fff;
    //         font-size: 26px;
    //         height: 28px;
    //         padding: 0 23px;
    //         border-radius: 3px;
    //         height: 35px;
    //     }
    // }
  }
  
  .title {
    font-weight: bold;
  }
  
  ::v-deep .el-pagination.is-background ul li {
    background-color: rgba(2, 4, 13, 0.5) !important;
    color: #fff;
    height: 50px;
    line-height: 50px;
    width: 55px;
    font-size: 35px;
    font-weight: 700;
  }
  
  ::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active {
    border: 2px solid #00ffff;
    color: #00ffff;
  }
  
  ::v-deep .el-pagination.is-background .btn-next,
  .el-pagination.is-background .btn-prev,
  .el-pagination.is-background .el-pager li {
    background-color: rgba(2, 4, 13, 0.5) !important;
    height: 50px;
    width: 55px;
  }
  
  ::v-deep .btn-prev {
    background-color: rgba(2, 4, 13, 0.5) !important;
    height: 50px;
    width: 55px;
  }
  </style>
  